<template>
  <section class="use-cases">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center m-b-30">
          <h1>{{t('useCase')}}</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
          <ul class="use-cases-ul">
            <li v-for="usecase_img in usecaseImgs">
              <div class="title">
                <img :class="usecase_img.class1" style="width:32px;margin-right:20px;" />
                <img :class="usecase_img.class2" style="width:16px;margin-right:20px;" />
                <img :class="usecase_img.class3" style="width:32px;margin-right:20px;" />
                <span><strong>{{t(usecase_img.strong)}}</strong>{{t(`${usecase_img.strong}S`)}}</span>
                <span class="use-case-link"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  /** lib **/
  import {
    useI18n
  } from 'vue-i18n'
  /** components **/
  import bSkeleton from '../../../../components/bSkeleton.vue'
  /** logic **/
  import useImgLoading from './img-loading' // img-loading
  export default {
    setup() {
      return {
        ...useImgLoading(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "useCase":"用例",
  "identify": "识别",
  "identifyS":" 耗能电器",
  "gather":"收集",
  "gatherS":" 借助智能设备，轻松制造数据",
  "optimize":"优化",
  "optimizeS":" SIGFOX网络上带有传感器的垃圾收集路线",
  "publish":"发布",
  "publishS":" 您所在城市的开放数据门户"
  },
  "en": {
  "useCase":"Use cases",
  "identify": "Identify",
  "identifyS":" energy-hogging appliances",
  "gather":"Gather",
  "gatherS":" manufacturing data easily, thanks to smart devices",
  "optimize":"Optimize",
  "optimizeS":" trash collection routes with sensors on the SIGFOX network",
  "publish":"Publish",
  "publishS":" an open data portal for your municipality"
  },
  "ja": {
  "useCase":"ユースケース",
  "identify": "識別する",
  "identifyS":" エネルギーを大量に消費する電化製品",
  "gather":"ギャザー",
  "gatherS":" スマートデバイスのおかげで、データを簡単に製造できます",
  "optimize":"最適化",
  "optimizeS":" SIGFOXネットワーク上のセンサーを使用したごみ収集ルート",
  "publish":"公開する",
  "publishS":" あなたの自治体のためのオープンデータポータル"
  }
  }
</i18n>

<style lang="scss" scoped>
  section {
    padding-top: 80px;
    position: relative;
    overflow: hidden;
    padding-bottom: 80px;
  }

  .use-cases {
    background: #f4f4f4;
  }

  .expanding-ul,
  .use-cases-ul {
    padding: 0px;
    position: relative;
    overflow: hidden;
  }

  .use-cases-ul li {
    line-height: 36px;
  }

  .use-cases-ul li {
    list-style: none;
    /* text-align: center; */
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 24px;
    margin-bottom: 24px;
    /* cursor: pointer; */
    font-size: 16px;
  }

  .use-cases-ul li .title {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    text-align: left;
  }

  .use-cases-ul .title i {
    color: #14CC71;
    font-size: 32px;
    display: inline-block;
    margin-right: 24px;
  }

  .use-cases-ul .title span {
    position: relative;
  }

  .use-cases-ul .title strong {
    font-weight: 600;
    color: #504b57;
  }

  .use-case-link {
    padding: 0;
    margin-left: 8px;
  }

  .use-cases-ul {
    .thermometer {
      content: url('../../../../assets/img/streamline/streamline-thermometer.png');
    }

    .add {
      content: url('../../../../assets/img/streamline/streamline-add-1.png');
    }

    .lightbulb {
      content: url('../../../../assets/img/streamline/streamline-lightbulb-2.png')
    }

    .factory {
      content: url('../../../../assets/img/streamline/streamline-factory.png');
    }

    .speed {
      content: url('../../../../assets/img/streamline/streamline-dashboard-speed-streamline.png')
    }

    .truck {
      content: url('../../../../assets/img/streamline/streamline-truck-dump.png');
    }

    .smartphone {
      content: url('../../../../assets/img/streamline/streamline-smartphone.png');
    }

    .building {
      content: url('../../../../assets/img/streamline/streamline-building-12.png');
    }

    .board {
      content: url('../../../../assets/img/streamline/streamline-chart-board.png')
    }
  }
</style>